<template>
	<view class="content">
		<u-navbar class="head" :fixed="false" :title="config.navTitle" leftIconColor="#fff" :autoBack="true"
			:safeAreaInsetTop="true">
		</u-navbar>

		<web-view ref="webview" fullscreen="false" :webview-styles="{progress:'#51d0d0'}" class="uni-flex-item"
			:src="config.path">
		</web-view>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				config: {
					navTitle: '',
					path: ''
				}
			}
		},
		onReady() {
			// 部分机型自带的自动旋转功能，可能会影响应用页面，这里做一个简单的竖屏处理
			// 受影响机型： 小新pad
			plus.screen.lockOrientation('portrait'); // 强制竖屏

			// 获取webview高度
			this.getWebViewHeightFun();
		},

		created() {
			let that = this;
			// 获取基础参数数据
			let menu = this.$store.state.Menu;
			this.$set(this.config, 'navTitle', menu.APFunName);
			// 拼接对应报表地址
			let path = this.Request.IPAgreement() + this.Request.serverIP() + '/ReportList/APPTable?moduleName=' + menu
				.Para + '&win_size=win_medium';
			this.$set(this.config, 'path', path);

		},

		onUnload() {
			plus.screen.lockOrientation('portrait'); // 切换到竖屏  
		},
		methods: {
			/** 
			 * 获取当前webview需要占用的高度
			 */
			getWebViewHeightFun() {

				var that = this;
				let height = 0; //定义动态的高度变量
				let navbarHeight = 0;
				uni.getSystemInfo({ // 获取当前设备的具体信息
					success: (sysinfo) => {
						// 总盒子高度
						height = sysinfo.windowHeight;
						// 导航栏高度
						uni.createSelectorQuery().select('.head').boundingClientRect(data => {
							console.log(data)
							navbarHeight = data.height;
							height = height - data.height;
							let currentWebview = that.$scope.$getAppWebview().children()[
								0]; //获取当前web-view
							var wv = currentWebview;
							wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
								top: navbarHeight, //此处是距离顶部的高度，应该是你页面的头部
								height: height, //webview的高度
							})
						}).exec()

					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep {
		.uni-card {
			margin: 8px !important;
			padding: 0 !important;

			.uni-card__content {
				padding: 0 !important;
			}
		}
	}

	.content {
		// background-color: #51d0d0;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		/* 给顶部盒子安全高度 */
		// padding-top: var(--status-bar-height);

		.head {
			z-index: 99999999;
			position: relative;
		}

		.popup-container {
			z-index: 1001;
			/* 设置一个较高的z-index值 */
		}
	}

	.reportWrap {
		display: flex;
		flex-direction: column;
	}

	// 选择弹窗
	.picker-opt {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 10px;
		border-bottom: 1px solid #f2f2f2;
		font-size: 16px;
		height: 40px;
	}

	.picker-opt>text:first-child {
		color: #999999;
	}

	.picker-opt>text:last-child {
		color: #51d0d0;
	}

	.picker-view {
		width: 750rpx;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 40px;
		text-align: center;
	}

	// 搜索弹窗
	.popSearch {
		display: flex;
		flex-direction: column;
		padding: 10px;
		font-size: 14px;
		background-color: #fff;

		.searchRow {
			display: flex;
			align-items: center;
			padding: 5px;
			margin-bottom: 5px;

			.rowRequire {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 8px;
				height: 8px;
				margin-right: 5px;

				text {
					color: red;
				}
			}

			.rowLabel {
				width: 72px;
				margin-right: 5px;
				color: #3a3a3a;
			}

			.rowValue {
				flex: 1;
				color: #999999;
			}

			.uni-icons {
				color: #999999 !important;
			}
		}

		button {
			background-color: #51d0d0;
			display: block;
			border-radius: 0;
		}
	}
</style>